<template>
  <div>
    <dt-modal-info ref="info" title="我的积分" class="my-point" :width="470" :transfer="false">
      <div v-if="tipsInfo.tipMsg!=''" class="flex tips-text flex-horizontal-between">
        <div>
          <Icon type="md-alert" class="tips_icon" color="#FFA000" style="margin-right:8px;" size="14"/>
          <span>{{tipsInfo.tipMsg}}</span>
        </div>
        <span class="hand" @click="viewDetailFun()">查看</span>
      </div>
      <dt-info :options="orgOptions" :info="orgInfo" style="margin-top:20px;"></dt-info>
      <ul class="flex base-msg flex-horizontal-between flex-vertical-center">
        <li v-for="(item,index) in personScore" :key="index">
          <p class="value">{{Number(scoreInfo[item.key])}}</p>
          <p class="name">{{item.name}}</p>
        </li>
      </ul>
      <div class="flex flex-horizontal-end" style="margin-top:10px;">
        <Button @click="scoreDetailFun" type="primary" class="score-btn">查看积分明细</Button>
      </div>
    </dt-modal-info>
    <!--0分申诉-->
    <dt-modal-info ref="appealInfo" title="0分申诉" class="appeal-info" :width="500" :transfer="false" @close='closeAppealFun()'>
      <ul class="appeal-content">
        <li v-for="(item,index) in appealList" :key="index" class="appeal-text flex flex-horizontal-between flex-vertical-center">
          <div>
            <p><span class="time">{{item.zeroDate}}</span><span class="status" v-if="item.state!=5" :style="{color:appealState.filter(ele=>ele.key==item.state)[0].color}">{{appealState.filter(ele=>ele.key==item.state)[0].name}}</span></p>
            <p class="desc">{{item.remark}}</p>
          </div>
          <span class="hand operate" @click="appealFun(item)" v-if="item.state!=5">{{item.state == 1?'去申诉':'查看详情'}}</span>
        </li>
      </ul>
    </dt-modal-info>
    <!--去申诉-->
    <dt-modal-edit ref="edit" title="0分申诉" @ok="onOk" okText="提交申诉"></dt-modal-edit>
    <!--积分明细-->
    <integral-detail-show ref="integralDetailShow"></integral-detail-show>
  </div>
</template>
<script>
import orgOpt from './orgConfig'
import appealOpt from './appeal'
import integralDetailShow from '../statistics/integralDetailShow.vue'
import moment from 'moment'
import scoreMgr from '@/biz/score/index'
import integralMgr from '@/biz/buildingHome/integral'

export default {
  data(){
    return{
      orgInfo: {
        title:'',
        orgId: [],
        buildingId: '', // 案场ID
        orgCompanyId: '', // 分公司ID
        orgDivisionId: '', //事业部ID
        orgOfficeId: '', //事业处ID
        level: 1
      },
      orgOptions: [],
      tipsInfo:{
        tipMsg:'',
        state:null
      },
      personScore: [
      {
        name: '我的积分',
        key: 'curScore',
      }, {
        name: '昨日减分',
        key: 'yesterdayDeduction',
      }, {
        name: '昨日加分',
        key: 'yesterdayAddPoints',
      }, {
        name: '年0分次数',
        key: 'yearZeroCount',
      }],
      scoreInfo:{
        curScore:0,
        yesterdayDeduction:0,
        yesterdayAddPoints:0,
        yearZeroCount:0
      },
      appealList:[],
      appealInfo:{
        zeroDate:'',
        zeroScoreId:null,
        appealAnnexList:[],
        appealReason:''
      },
      appealState:[
        {
          name:'可申诉',
          key:1,
          color:'#46CA41'
        },{
          name:'待审核',
          key:2,
          color:'#FB8F10'
        },{
          name:'已通过',
          key:3,
          color:'#999999'
        },{
          name:'已驳回',
          key:4,
          color:'#999999'
        },{
          name:'放弃申诉',
          key:5
        }
      ]
    }
  },
  components:{
    integralDetailShow
  },
  methods:{
    show(){
      let orgCheck = JSON.parse(window.localStorage.getItem(this.$dt.userInfo().currentRoleId+'appeal'))
      if (orgCheck) {
        this.orgInfo = orgCheck
      }
      this.orgOptions = orgOpt.options(this)
    },
    closeAppealFun(){
      this.getBaseInfo()
      this.getAppealTip()
    },
    getBaseInfo() {
      integralMgr
        .scoreUserHome({
          orgId: this.orgInfo.orgId.length?this.orgInfo.orgId[this.orgInfo.orgId.length-1]:null,
          pageNum: 1,
          pageSize: 99999,
          date: moment().format('yyyy-MM-DD'),
          userId: this.$dt.userInfo().userId,
          roleId: this.$dt.userInfo().role.roleId
        })
        .then((res) => {
          this.scoreInfo = {
            ...res
          }
          this.$refs.info.show()
        })
        .catch((err) => {
          this.scoreInfo = {
            curScore:0,
            yesterdayDeduction:0,
            yesterdayAddPoints:0,
            yearZeroCount:0
          }
        })
    },
    getAppealTip(){
      // 缓存所选组织
      window.localStorage.setItem(this.$dt.userInfo().currentRoleId+'appeal', JSON.stringify(this.orgInfo))

      scoreMgr
        .getAppealTip({
          orgId: this.orgInfo.orgId.length?this.orgInfo.orgId[this.orgInfo.orgId.length-1]:null,
          userId: this.$dt.userInfo().userId,
          roleId: this.$dt.userInfo().role.roleId
        })
        .then((res) => {
          this.tipsInfo = {...res}
        })
        .catch((err) => {
          this.tipsInfo = {
            tipMsg:'',
            state:null
          }
        })
    },
    scoreDetailFun(){
      let paramsMsg = {
        orgId: this.orgInfo.orgId.length?this.orgInfo.orgId[this.orgInfo.orgId.length-1]:null,
        buildingId: 0,
        checkIndex: 1,
        sellFlag: true,
        date: moment().format('yyyy-MM-DD'),
        buildingName: '',
        divisionName:this.orgInfo.title.split('-')[0]?this.orgInfo.title.split('-')[0]:'',
        companyName: this.orgInfo.title.split('-')[1]?this.orgInfo.title.split('-')[1]:'',
        userName: this.$dt.userInfo().userName,
        officeName: this.orgInfo.title.split('-')[2]?this.orgInfo.title.split('-')[2]:'',
        roleName: this.$dt.userInfo().role.roleName,
        workNo: this.$dt.userInfo().workNo,
        userId: this.$dt.userInfo().userId,
        roleId: this.$dt.userInfo().role.roleId
      }

      this.$refs.integralDetailShow.show(paramsMsg)
    },
    viewDetailFun(){
      scoreMgr
        .lookFun({
          orgId: this.orgInfo.orgId.length?this.orgInfo.orgId[this.orgInfo.orgId.length-1]:null,
          userId: this.$dt.userInfo().userId,
          roleId: this.$dt.userInfo().role.roleId,
          state: this.tipsInfo.state
        })
        .then((res) => {
          this.$refs.info.hide()
          this.getAppealList()
        })
    },
    getAppealList(){
      scoreMgr
        .getAppealList({
          orgId: this.orgInfo.orgId.length?this.orgInfo.orgId[this.orgInfo.orgId.length-1]:null,
          userId: this.$dt.userInfo().userId,
          roleId: this.$dt.userInfo().role.roleId
        })
        .then((res) => {
          this.appealList = res
          this.$refs.appealInfo.show()
        })
    },
    appealFun(item){
      if(item.state == 1){
        this.appealInfo = {
          zeroDate:item.zeroDate,
          zeroScoreId:item.zeroScoreId,
          appealAnnexList:[],
          appealReason:''
        }
        this.$refs.edit.show(new appealOpt(this).options(),this.appealInfo)
      }else{
        this.$router.push({
          name: 'appealDetailWork',
          query: {
            businessId: item.zeroScoreId// 0分申诉id
          }
        })
      }
    },
    onOk(){
      let appealAnnex = this.appealInfo.appealAnnexList.map(item=>{return item.url}).join(',')
      let params = {
        ...this.appealInfo,
        appealAnnex:appealAnnex
      }
      scoreMgr
        .submitAppealFun(params)
        .then((res) => {
          this.getAppealList()
          this.$refs.edit.hide()
        })
    }
  }
}
</script>
<style scoped lang="scss">
.my-point{
  .tips-text{
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
    background: #FFF7E9;
    border-radius: 4px;
    margin-bottom: 5px;
    color: #FFA000;
    font-size: 12px;
  }
  .base-msg{
    padding: 0 20px;
    color:#333;
    height: 80px;
    background: #F9F9F9;
    border-radius: 6px;
    li{
      text-align: center;
      .value{
        font-size: 20px;
        font-weight: Medium;
      }
      .name{
        font-size: 14px;
      }
    }
  }
}

.appeal-info{
  ::v-deep .ivu-modal-body{
    padding: 0 20px;
  }
  .appeal-content {
    max-height: 500px;
    overflow-y: auto;
  }
  .appeal-text {
    font-size: 14px;  
    margin: 10px 0;
    padding-bottom:10px;
    border-bottom: 1px solid #F2F2F2;
    .time{
      height: 22px;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      line-height: 22px;
    }
    .status {
      margin-left: 20px;
      height: 20px;
      font-weight: 400;
      color: #46CA41;
      line-height: 20px;
    }
    .desc{
      height: 20px;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
    .operate{
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #2D8CF0;
      line-height: 20px;
    }
  }
}
</style>